import { Input, Select } from 'antd';
import React from 'react';
import SimpleCondition from './SimpleCondition';

function Condition({ value, onChange }) {
  const { type, ...rest } = value;

  return (
    <>
      <Select
        style={{ width: '102px', marginRight: '4px' }}
        value={type}
        onChange={type => {
          if (type === 'BinaryExpression') {
            onChange({
              type,
              op: 'eq',
              rhs: { isString: true },
            });
          } else if (type === 'SpelExpression') {
            onChange({
              type,
            });
          }
        }}
      >
        <Select.Option value="BinaryExpression">简单条件</Select.Option>
        <Select.Option value="SpelExpression">自定义条件</Select.Option>
      </Select>
      {type === 'BinaryExpression' && (
        <SimpleCondition
          value={{ ...rest }}
          onChange={value => onChange({ type: 'BinaryExpression', ...value })}
          style={{ display: 'inline-block', width: 'calc(100% - 102px - 4px)' }}
        />
      )}
      {type === 'SpelExpression' && (
        <Input
          value={rest.expression}
          onChange={e => onChange({ type: 'SpelExpression', expression: e.target.value })}
          style={{ display: 'inline-block', width: 'calc(100% - 102px - 4px)' }}
          placeholder="自定义条件"
        />
      )}
    </>
  );
}

export default Condition;
